<template>
	<div class="avatar">
		<div class="left">{{ $t('personalCenter.avatar', '头像') }}</div>
		<div class="right_avatar">
			<div class="right_avatar_img">
				<!-- <img v-if="formState.avatar_url" :src = formState.avatar_url alt="" />
							<div v-if="!formState.avatar_url">{{employee_name}}</div> -->
				<ok-avatar .personInfo="props.userData" width="80px" height="80px" />
				<div
					v-if="formState.avatar_url"
					class="default"
					@click="restoreDefault"
				>
					{{ $t('personalCenter.restoreDefaultAvatar', '恢复默认头像') }}
				</div>
			</div>
			<div class="right_avatar_update">
				<button :class="['upload', isZhCN ? '' : 're-zh']" @click="onUpload">
					{{ $t('personalCenter.uploadNewAvatar', '上传新头像') }}
				</button>
				<p>
					{{
						$t(
							'personalCenter.supportPngAnJpg',
							'支持png和jpg格式， 建议1M以内'
						)
					}}
				</p>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { i18n } from '@/locales'
const { $t } = i18n
const props = defineProps(['formState', 'userData'])
const emit = defineEmits(['restoreDefault', 'onUpload'])
const restoreDefault = () => {
	emit('restoreDefault')
}
const onUpload = () => {
	emit('onUpload')
}
let isZhCN = ref(true)
onMounted(() => {
	isZhCN.value = localStorage.getItem("locale") === "zh-CN" ? true : false
})
</script>
<style scoped lang="less">
.avatar {
	display: flex;
	height: 98px;
	.left {
		display: inline-block;
		width: 120px;
		font-family: PingFang SC;
		font-style: normal;
		font-weight: 500;
		font-size: 14px;
		color: #8f959e;
		line-height: 98px;
	}
	.right_avatar {
		display: flex;
		.right_avatar_img {
			position: relative;
			margin-top: 9px;
			margin-right: 24px;
			width: 80px;
			height: 80px;
			// border:1px solid #ccc;
			border-radius: 50%;
			.default {
				display: none;
			}

			img {
				width: 80px;
				height: 80px;
				border-radius: 50%;
			}
			div {
				width: 80px;
				height: 80px;
				line-height: 69px;
				border: 1px solid #ccc;
				border-radius: 50%;
				text-align: center;
				background: var(--bl-brand-c);
				font-size: 46px;
				color: #ffffff;
			}
		}
		.right_avatar_img:hover {
			width: 80px;
			height: 80px;
			.default {
				display: inline-block;
				width: 81px;
				height: 81px;
				position: absolute;
				top: 0%;
				left: 0%;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 100%;
				text-align: center;
				line-height: 81px;
				font-size: 12px;
				color: @rok-white-bg;
				cursor: default;
			}
		}
		.right_avatar_update {
			height: 98px;
			.upload {
				margin-top: 19px;
				width: 102px;
				height: 32px;
				background: var(--bl-brand-c);
				border-radius: 4px;
				border: 0;
				cursor: pointer;
				color: #fff;
				margin-bottom: 16px;
				&.re-zh {
					width: 100px;
					height: 44px;
				}
			}
			p {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: normal;
				font-size: 12px;
				color: #8f959e;
			}
		}
	}
}
</style>
